<template>
  <el-row
    :gutter="widget.options.gutter"
    :justify="widget.options.justify"
    :align="widget.options.align"
    :tag="widget.options.tag ? widget.options.tag : 'div'"
    @click.stop="selectField"
  >
    <slot></slot>
    <template v-for="(element, index) in widget.widgetList" :key="element.id">
      <!-- <component :is="FieldComs[`${element.type}Widget`]" :widget="element"> -->
      <col-widget :widget="element">
        <template v-if="selectedId == element.id">
          <el-button-group class="controlGroupCom">
            <el-text type="primary">{{ element.type }}</el-text>
            <el-button
              :icon="Delete"
              @click.stop="onClickDelete(widget.widgetList, index)"
              >33</el-button
            >
          </el-button-group>
        </template>
      </col-widget>
      <!-- </component> -->
    </template>
  </el-row>
</template>

<script setup>
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";
// import FieldComs from "@/views/pageDesign/components/centralRegion/index.js";
import colWidget from "./colWidget.vue";
import {
  selectedId,
  onClickDelete,
} from "@/views/pageDesign/components/globalVariable";
import { Delete } from "@element-plus/icons-vue";

defineOptions({
  name: "rowWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});
// console.log($props.widget,"widget")
let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped>
.el-row {
  padding: 5px;
  border: 1px dashed rgba(170, 170, 170, 0.75);
}
</style>
